<script setup>
import router from "@/router/index.js";

const returnMain = () => {
  router.push('/Main');
}
</script>

<template>
  <div class="main-container">
    <div class="form-container">
      <el-steps style="max-width: 100%" :active="5" finish-status="success" align-center>
        <el-step title="查看差旅规章制度" description="View rules" />
        <el-step title="申请出差" description="Apply for travel" />
        <el-step title="规划行程" description="Plan schedules" />
        <el-step title="预算申请" description="Budget request" />
        <el-step title="出差申请完成" description="Success" />
      </el-steps>
      <el-divider />
      <div style="font-size: 25px; color: #009dff; font-weight: bolder; width: 100%; text-align:center; margin: 0 0 20px 0">申 请 出 差 成 功</div>
      <el-result
          icon="success"
          title="出差申请提交成功"
          sub-title="等待1-7个工作日后申请审批完成，即可进行出差"
      >
        <template #extra>
          <el-button type="primary" :onclick="returnMain">返回主页</el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<style>
.main-container{
  width: 100%;
}
.form-container{
  margin: 10px auto auto;
  width: 55%;
  padding: 2% 5%;
  border-radius: 20px;
  box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -webkit-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
  -moz-box-shadow: 0px 0px 15px 0px rgba(122, 122, 122, 0.3);
}
.form{
  margin: 0 auto;
  padding: 0 5%;
}
.button{
  margin: 0 auto;
}
</style>